<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js.lxx.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <nav class="c900 flex" style="margin: 10px auto 0px">
        <div class="flex" style="justify-content: center;">
            <el-link v-for="b in brands" :underline="false"
                     @click="brand=b.brand;query()">{{b.brand}}</el-link>
        </div>
        <el-input placeholder="搜索关键字" v-model="keyword" style="width: 250px">
            <el-button slot="append" icon="el-icon-search" @click="query()"></el-button>
        </el-input>
    </nav>
    <main class="c900 flex" style="background-color: transparent; padding: 0px;">
        <div class="car" v-for="car in cars">
            <img :src="car.image">
            <div>
                <div class="price">￥{{car.price}}<small>元/天</small></div>
                <el-rate v-model="car.stars"></el-rate>
                <p>{{car.brand}}<br><small>{{car.model}}</small></p>
                <a class="abtn" :href="'detail.html?id='+car.id">租 赁</a>
            </div>
        </div>
        <div style="width: 100%; text-align: center; margin-top: 10px">
            <el-button type="primary" @click="query( page+1, 4)" round>更多车辆</el-button>
        </div>
    </main>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            rate:3.5,
            cars : [],
            page: 1,
            size: 8,
            brand: "",
            keyword: "",
            brands:[]
        },
        created(){
            this.query();
            axios.get("QueryBrand.s").then(res=>this.brands=res.data);
        },
        methods:{
            query(page, size){
                let url = "QueryPageCar.s?";
                this.page = page || 1;
                this.size = size || 8;
                if(this.keyword){
                    url += "&keyword=" + this.keyword;
                }
                if(this.brand){
                    url += "&brand=" + this.brand;
                }
                url += "&page=" + this.page;
                url += "&size=" + this.size;
                axios.get(url).then(res=>{
                    if(this.page==1){
                        this.cars = res.data;
                    } else {
                        this.cars = this.cars.concat(res.data);
                    }
                });
            }
        }

    })
</script>
</body>
</html>